<template>
  <view class="footer-page" :style="data.style">
    <tt-share class="display-none"></tt-share>
    <view
      class="tabbar"
      :class="data.activeIndex == index ? 'active' : ''"
      hover-class="tabbar-press"
      v-for="(item, index) in data.footer"
      :key="index"
      @click="goHerf(item.link)"
    >
      <view class="nb_icon" :class="item.icon">
        <view v-if="item.icon == 'icon_my' && data.counts > 0" class="counts">
        </view>
      </view>
      <view class="txt">{{ item.txt }}</view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive, getCurrentInstance, onMounted } from "vue";
const { proxy } = getCurrentInstance();

import { footer, editFooter } from "../mock/common";
import { watchCounts } from "@/apis/chat.ts";
const data = reactive({
  style: {},
  footer: [],
  activeIndex: 0,
  userinfo: uni.getStorageSync("userinfo") || {},
  counts: 0,
  systemInfo: {},
});
onMounted(() => {
  data.systemInfo = uni.getSystemInfoSync();
  data.footer = editFooter;
  activePage();
  fetchCounts();
  data.style = {
    "padding-bottom": `${data.systemInfo.safeAreaInsets.bottom}px`,
  };
});
const rpx2px = (v: any) => {
  return (data.systemInfo.windowWidth * v) / 750;
};
const fetchCounts = () => {
  watchCounts().then((res: any) => {
    data.counts = res.data;
    uni.setStorageSync("counts", res.data);
  });
};
const activePage = () => {
  let page: any = getCurrentPages().pop();
  data.activeIndex = data.footer.findIndex((ele: any) => {
    return ele.link == `/${page.route}`;
  });
};
const goHerf = (link: any) => {
  if (link == "/pages/member/index/index" && !data.userinfo.uid) {
    uni.navigateTo({
      url: link,
    });
  }
  uni.redirectTo({
    url: link,
  });
};

/**
 * 获取当前位置
 */
const getLocation = () => {
  uni.getLocation({
    type: "wgs84",
    success(res) {
      const latitude = res.latitude;
      const longitude = res.longitude;
      const speed = res.speed;
      const accuracy = res.accuracy;
      let distance: any = 10;
      let nearCommunity = "";
      data.community.list.map((ele: any) => {
        let middleDistance = getDistance(
          latitude,
          longitude,
          ele.local.latitude,
          ele.local.longitude
        );
        if (middleDistance < distance) {
          distance = middleDistance;
          nearCommunity = ele;
        }
      });
      if (nearCommunity) {
      }
    },
  });
};
/**
 * 计算距离
 */
const getDistance = (lat1: any, lng1: any, lat2: any, lng2: any) => {
  var radLat1 = (lat1 * Math.PI) / 180.0;
  var radLat2 = (lat2 * Math.PI) / 180.0;
  var a = radLat1 - radLat2;
  var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
  var s =
    2 *
    Math.asin(
      Math.sqrt(
        Math.pow(Math.sin(a / 2), 2) +
          Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)
      )
    );
  s = s * 6378.137; // EARTH_RADIUS;
  s = Math.round(s * 10000) / 10000;
  return s;
};
</script>
<style lang="scss" scoped>
@import url("@/static/css/theme.scss");
.footer-page {
  position: fixed;
  width: 100vw;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  box-shadow: rgba(255, 255, 255, 0.08) 0px 4px 12px;
  z-index: 1001;
  .tabbar {
    position: relative;
    padding: 20rpx 30rpx;
    color: #888;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .nb_icon {
      position: relative;
      font-size: 44rpx;
    }
    .txt {
      margin-top: 10rpx;
      font-size: 24rpx;
    }
    &.active {
      color: #000;
    }
    &.tabbar-press {
      background-color: #f9f9f9;
    }

    .counts {
      position: absolute;
      top: -4rpx;
      right: -10rpx;
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      background-color: red;
    }
  }
}
</style>
